/**
 * Created by guiyongdong on 16/9/30.
 */
'use strict';

import  React, {Component} from 'react';
import  {
    StyleSheet,
    View,
    Image,
    TouchableOpacity,
    Dimensions,
    Text,
    ListView
} from 'react-native';

export  default class HomeIconView extends Component {
    static defaultProps = {
        iconArray:[]
    };
    static propTypes = {
        iconArray:React.PropTypes.array
    };
    // 构造
      constructor(props) {
          super(props);
          var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 != r2});
          // 初始状态
          this.state = {
              dataSoure:ds.cloneWithRows(props.iconArray)
          };
      }
    _renderRow(rowData,sectionID,rowID) {
        return (
            <TouchableOpacity style={styles.row} activeOpacity={0.8}>
                <View style={styles.row}>
                    <Image style={styles.image} source={{uri:rowData['picture_url']}} />
                    <Text style={styles.text}>
                        {rowData['title']}
                    </Text>
                </View>
            </TouchableOpacity>
        );
    }

    render() {
        return(
            <View style={this.props.style}>
                <ListView
                initialListSize={8}
                contentContainerStyle={styles.container}
                dataSource={this.state.dataSoure}
                renderRow={this._renderRow}
                showsVerticalScrollIndicator={false}
                bounces={false}
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
        flexDirection: 'row'
    },
    image:{
        width:(Dimensions.get('window').width - 25*8)/4.0,
        height:(Dimensions.get('window').width - 25*8)/4.0,
        marginTop:15
    },
    row: {
        justifyContent: 'center',
        width: Dimensions.get('window').width/4.0,
        height: Dimensions.get('window').width/4.0,
        backgroundColor: 'white',
        alignItems: 'center'
    },
    text: {
        flex: 1,
        marginTop: 10,
        textAlign:'center',
        fontSize:13,
        color:'#292929'
    }
});